/*
 * Copyright 2012-2019 the original author or authors.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
@import "variables";

// $indent1 must be sync'd with indent1 javascript variable in trace-renderer.js
$indent1: 8.41px;
$horizontal-padding: 8.41px;
// by default using flatButtonVerticalPadding, but these are really independent vars
$vertical-padding: $gt-flat-button-vertical-padding;

.font-weight-600 {
  font-weight: 600;
}

.gt-content-detail {
  margin-left: 6 * $indent1;
}

.gt-timers-table td {
  padding: 0 16px 0 0;
  text-align: right;
  vertical-align: top;
}

// some elements need the same padding as expanding elements
.gt-content-padding {
  padding: $vertical-padding $horizontal-padding;
}

.gt-expanded-content {
  background-color: #eee;
  padding-top: 3px !important;
}

.gt-unexpanded-content,
.gt-expanded-content {
  @extend .gt-content-padding;
  cursor: pointer;
  // margin-right is used (instead of padding-right on the container) so that stack traces which
  // require horizontal scrolling still have padding to their right
  margin-right: 20px;
  border-radius: 4px;
}

.gt-unexpanded-content:hover,
.gt-expanded-content:hover {
  background-color: #ddd;
}

// tighter vertical spacing in profile
.gt-profile .gt-unexpanded-content {
  margin-top: -1px;
  margin-bottom: -1px;
}

.gt-profile .gt-expanded-content {
  margin-top: -1px;
  margin-bottom: 3px;
}

.gt-left-numeric-column {
  text-align: right;
  // needs the same vertical padding as content
  padding: $vertical-padding 0;
}

.gt-indent1 {
  margin-left: $indent1;
}

.gt-indent2 {
  margin-left: 2 * $indent1;
}

.gt-indent4 {
  margin-left: 4 * $indent1;
}

.gt-indent6 {
  margin-left: 6 * $indent1;
}

.gt-width2 {
  width: 2 * $indent1;
}

.gt-width6 {
  width: 6 * $indent1;
}

.gt-pad1 {
  padding-left: $horizontal-padding;
  padding-right: $horizontal-padding;
}

.gt-pad1aligned {
  @extend .gt-pad1;
  margin-left: -$horizontal-padding;
}

.gt-pad1profile {
  @extend .gt-pad1;
  padding-top: 1px;
  padding-bottom: 1px;
}

.gt-flat-btn.gt-flat-btn-big-pad1aligned {
  @extend .gt-pad1;
  margin-left: -$horizontal-padding;
  padding-top: 6px;
  padding-bottom: 6px;
}

.gt-flat-btn.gt-flat-btn-big {
  @extend .gt-pad1;
  padding-top: 6px;
  padding-bottom: 6px;
}

.gt-second-line-indent {
  padding-left: (4 * $indent1);
  text-indent: -(4 * $indent1);
}

.gt-trace-query-text-column {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.gt-trace-query-total-column {
  width: 70px;
  text-align: right;
}

.gt-trace-query-other-column {
  width: 70px;
  text-align: right;
}

.gt-trace-query-rows-column {
  width: 110px;
  text-align: right;
}

.gt-padding-top-override {
  padding-top: 10px !important;
}

#queries table td {
  padding-top: 5px !important;
  padding-bottom: 5px !important;
}

.gt-trace-query-sort-button {
  @include gt-link-with-focus-ring;
  border-radius: .25rem;
  border: none;
  background-color: transparent;
  color: darken($gt-blue, 5%); // see .gt-link-color
  text-align: right;
  font-weight: 700;
}

.gt-trace-query-sort-button:hover {
  // this matches bootstrap's 'a' behavior (see scaffolding.scss)
  color: darken(darken($gt-blue, 5%), 15%);
}

/* text-indent is inherited by default, so need to reset it on buttons inside .second-level-indent,
   e.g. export button on trace modal
   (note: button seems ok in Chrome and Firefox without this, but IE seems technically correct and requires it) */
.gt-second-line-indent button {
  text-indent: 0;
}

.gt-trace-exception-indent {
  padding-left: (3 * $indent1);
}

.gt-break-word {
  word-break: break-all;
  word-break: break-word; // this is non-standard, but breaks at words if possible in chrome
}

.gt-pre-wrap {
  white-space: pre-wrap;
}

/* this is not used by export */
.gt-trace-detail-spinner {
  // relative position needed for spinner
  position: relative;
  display: inline-block;
  height: 60px;
  padding-left: 60px;
}

.gt-trace-attr-name {
  display: table-cell;
  font-weight: bold;
}

.gt-trace-attr-value {
  @extend .gt-break-word;
  @extend .gt-pre-wrap;
  // using table-cell so that copy pasting from attributes sections
  // will not put newline in between attribute names/values
  // (IE 9 and 10 will still use default display 'block' since this is applied to divs
  // which looks the same but copy pasting will have the newline oh well)
  display: table-cell;
  overflow: hidden;
}

.gt-breakdown-header {
  padding-top: 5px;
  padding-bottom: 3px;
}

.gt-trace-entry-bar-outer {
  height: 13px;
  margin-top: 5px;
  border: 1px #ccc solid;
}

.gt-trace-entry-bar {
  background-color: $gt-yellow;
  height: 100%;
}

.gt-dotdotdot {
  line-height: 16px;
}

.gt-with-clip {
  position: relative;
  padding-right: 33px;
}

.gt-clip {
  position: absolute;
  top: 5px;
  right: 7px;
  color: #666;
  cursor: pointer;
  // margin and padding are just to increase size of hitbox for ease of clicking
  margin: -5px;
  padding: 5px;
  font-size: 1rem;
}

// .gt-clip:hover is for exported traces
.gt-clip.zeroclipboard-is-hover, .gt-clip:hover {
  // important is needed to override .gt-full-screen-modal.modal .gt-clip
  color: $gt-blue !important;
}

// .gt-clip:active is for exported traces
.gt-clip.zeroclipboard-is-hover.zeroclipboard-is-active, .gt-clip:active {
  // important is needed to override .gt-full-screen-modal.modal .gt-clip
  color: darken($gt-blue, 12%) !important;
}

@include media-breakpoint-up(md) {
  body {
    font-size: 0.9rem;
  }

  .btn, .form-control, .input-group-addon {
    font-size: 0.9rem !important;
  }

  .dropdown-menu {
    font-size: 0.9rem;
  }
}

.gt-query-table th, .gt-query-table td {
  padding: .625rem;
}

.gt-query-text-column {
  font-family: Cousine, monospace;
  cursor: pointer;
  @extend .gt-break-word;
}

.gt-query-text-column:hover {
  color: $gt-blue;
}

.gt-query-total-column {
  min-width: 4rem;
  text-align: right;
  padding-left: 0 !important; // create more space
}

.gt-query-count-column {
  min-width: 4.1rem;
  text-align: right;
  padding-left: 0 !important; // create more space
}

.gt-query-other-column {
  min-width: 4rem;
  text-align: right;
  padding-left: 0 !important; // create more space
}

.gt-sortable-table-header {
  text-decoration: none !important;
  display: inline-block;
  @include gt-link-with-focus-ring;
}

.gt-sortable-table-header:focus:not(:hover) {
  color: $gt-blue;
}
